<template>
	<view>
		<view class="heads">
		<view class="lan_box">
			<view @click="lanId(item)" :class="['infos',lanCheck==item.id?'check':'']" v-for="(item,index) in lan" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="tab_box" v-if="lanCheck==1">
			<u-tabs :list="cate" :bold="true" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="tab_box" v-if="lanCheck==2">
			<u-tabs :list="cates" :bold="true" :is-scroll="false" :current="currents" @change="changes"></u-tabs>
		</view>
		
		<view class="tab_box" v-if="lanCheck==3">
			<u-tabs :list="catess" :bold="true" :is-scroll="false" :current="currentss" @change="changess"></u-tabs>
		</view>
		</view>
		<view style="height: 81px;"></view>
		
		<view class="list_box" v-if="lanCheck==1">
			<view class="info" v-for="(item,index) in list" :key="index" >
				<view class="head">
					<view>订单编号:{{item.order_num}}</view>
					<view class="red">{{item.statusText}}</view>
				</view>
				<view class="center">
					<image :src="item.goods.goods_img" class="img"></image>
					<view class="c_right">
						<view class="name">{{item.goods.goods_name}}</view>
						<view class="time">
							下单时间: {{item.createtime}}
						</view>
						<view class="time">
							x {{item.goods.buy_num}}
						</view>
						<view class="m_box"><text>合计:</text><text class="money">￥{{item.pay_total}}</text></view>
					</view>
				</view>
				<view class="b_top">
					<view class="i_box">
						<view>联系人</view>
						<view>{{item.shou_name}}</view>
					</view>
					<view class="i_box">
						<view>联系电话</view>
						<view>{{item.shou_phone}}</view>
					</view>
					<view class="i_box">
						<view>联系地址</view>
						<view class="address_box">{{item.area}}{{item.address}}</view>
					</view>
					<view class="i_box">
						<view>备注</view>
						<view class="address_box">{{item.remark}}</view>
					</view>
					<view class="i_box">
						<view>预约时间</view>
						<view>{{item.yc_time}}</view>
					</view>
				</view>
				<view class="bottom" v-if="shenhe_status==4">
					<view class="btn btn_red" v-if="item.shou_phone&&item.shenhe_status==4" @click="cal(item)">拨打电话</view>
					<view class="btn btn_red" v-if="item.lat&&item.long&&item.shenhe_status==4" @click="openMap(item)">位置导航</view>
					<view class="btn " v-if="item.shenhe_status==4" @click="que(item,index)">完成订单</view>
				</view>
			</view>
		</view>
		
		
		<view class="list_box" v-if="lanCheck==2">
			<view class="info" v-for="(item,index) in list" :key="index" >
				<view class="head">
					<view>订单编号:{{item.order_no}}</view>
					<view class="red">{{item.statusText}}</view>
				</view>
				<view class="center">
					<image :src="item.images" class="img"></image>
					<view class="c_right">
						<view class="name">{{item.name}}</view>
						<view class="time">
							下单时间: {{item.createtime}}
						</view>
						<view class="time">
							x {{item.num}}道<text v-if="item.ewnum>0"> (额外{{item.ewnum}}道)</text>
						</view>
						<view class="m_box"><text>合计:</text><text class="money">￥{{item.money}}</text></view>
					</view>
				</view>
				<view class="b_top">
					<view class="i_box">
						<view>联系人</view>
						<view>{{item.sh_name}}</view>
					</view>
					<view class="i_box">
						<view>联系电话</view>
						<view>{{item.sh_mobile}}</view>
					</view>
					<view class="i_box">
						<view>联系地址</view>
						<view class="address_box">{{item.site}}</view>
					</view>
					<view class="i_box">
						<view>备注</view>
						<view class="address_box">{{item.remark}}</view>
					</view>
					<view class="i_box">
						<view>预约时间</view>
						<view>{{item.yc_time}}</view>
					</view>
				</view>
				<view class="bottom" v-if="item.status<5">
					<view class="btn " v-if="item.status==2" @click="jd(item,index)">确认接单</view>
					<view class="btn " v-if="item.status==3" @click="fwd(item,index)">确认服务</view>
					<view class="btn btn_red" v-if="item.sh_mobile&&item.status<5" @click="cal(item)">拨打电话</view>
					<view class="btn btn_red" v-if="item.lat&&item.long&&item.status<5" @click="openMap(item)">位置导航</view>
					<view class="btn " v-if="item.status==4" @click="ques(item,index)">完成订单</view>
				</view>
			</view>
		</view>
		
		
		<view class="list_box" v-if="lanCheck==3">
			<view class="info" v-for="(item,index) in list" :key="index" >
				<view class="head">
					<view>订单编号:{{item.order_no}}</view>
					<view class="red">{{item.statusText}}</view>
				</view>
				<view class="center">
					<image :src="item.images" class="img"></image>
					<view class="c_right">
						<view class="name">{{item.name}}</view>
						<view class="time">
							下单时间: {{item.createtime}}
						</view>
						<view class="time">
							x {{item.num}} 人
						</view>
						<view class="m_box"><text>合计:</text><text class="money">￥{{item.money}}</text></view>
					</view>
				</view>
				<view class="b_top">
					<view class="i_box">
						<view>联系人</view>
						<view>{{item.sh_name}}</view>
					</view>
					<view class="i_box">
						<view>联系电话</view>
						<view>{{item.sh_mobile}}</view>
					</view>
					<view class="i_box">
						<view>联系地址</view>
						<view class="address_box">{{item.site}}</view>
					</view>
					<view class="i_box">
						<view>备注</view>
						<view class="address_box">{{item.remark}}</view>
					</view>
					<view class="i_box">
						<view>预约时间</view>
						<view>{{item.yc_time}}</view>
					</view>
				</view>
				<view class="bottom" v-if="item.status<4">
				
					<view class="btn btn_red" v-if="item.sh_mobile&&item.status<4" @click="cal(item)">拨打电话</view>
					<view class="btn btn_red" v-if="item.lat&&item.long&&item.status<4" @click="openMap(item)">位置导航</view>
					<view class="btn " v-if="item.status==3" @click="quess(item,index)">完成订单</view>
				</view>
			</view>
		</view>
		
		
		<view class="bitmap" v-if="emptyShow">
			<image src="../../static/img/no_content.png" mode="aspectFit"></image>
			<view class="gray_font fs-13">
				暂无
			</view>
		</view>
		
	</view>
</template>

<script>
import { methods } from '../../uview-ui/libs/mixin/mixin';

	export default{
		data(){
			return{
				lan:[{id:1,name:'套餐订单'},{id:2,name:'厨师顶单'},{id:3,name:'定制订单'}],
				lanCheck:1,
				cate:[{id:0,name:'全部'},{id:4,name:'服务中'},{id:6,name:'已完成'}],
				cates:[{id:0,name:'全部'},{id:2,name:'待接单'},{id:3,name:'待服务'},{id:4,name:'服务中'},{id:5,name:'已完成'}],
				catess:[{id:0,name:'全部'},{id:3,name:'服务中'},{id:4,name:'已完成'}],
				current:0,
				currents:0,
				currentss:0,
				params: {
					page: 1,
					limit: 10,
					status: 0
				},
				list: [],
				total: 0,
				emptyShow: false,
			}
			},
			onLoad() {
			this.getList();	
			},
			methods:{
				lanId(e){
					
					if(this.lanCheck==e.id) return;
					
				     this.lanCheck=e.id;
					 this.params.status=0;
					 this.params.page=1;
					 if(e.id==1){
						 this.getList();
					 }
					 if(e.id==2){
						 this.getLists();
					 }
					 if(e.id==3){
						 this.getListss();
					 }
					   
				},
				cal(e){
					
					let mobile='';
					if(this.lanCheck==1){
						
						mobile=e.shou_phone;
					}else{
						mobile=e.sh_mobile;
					}
					
					uni.makePhoneCall({
						phoneNumber:mobile
					})
				},
				openMap(e) {
					let _ = this;
					let ad='';
					if(_.lanCheck==1){
						
						ad=e.area+e.address;
					}else{
						ad=e.site;
					}
					
					uni.openLocation({
						name:ad,
						latitude: Number(e.lat),
						longitude: Number(e.long),
						complete(res) {
							console.log(res)
						}
					})
					
				},
				jd(e,index){
					let _=this;
					uni.showModal({
						title:'温馨提示',
						content:'确认接单?',
						success: (res) => {
							if(res.confirm){
								_.$post(_.$api.corderJd,{id:e.id,type:2,token:uni.getStorageSync('userToken')},ress=>{
									let {code,data,msg}=ress.data;
									if(code==1){
										_.$project.toast(msg);
										_.list[index].status=data.status;
										_.list[index].statusText=data.statusText;
										if(_.params.status>0&&data.status!=_.params.status){
											_.list.splice(index,1);
										}
										
									}
								});
								
							}
						}
					})
				},
				fwd(e,index){
					let _=this;
					uni.showModal({
						title:'温馨提示',
						content:'确认服务?',
						success: (res) => {
							if(res.confirm){
								_.$post(_.$api.corderFw,{id:e.id,type:2,token:uni.getStorageSync('userToken')},ress=>{
									let {code,data,msg}=ress.data;
									if(code==1){
										_.$project.toast(msg);
										_.list[index].status=data.status;
										_.list[index].statusText=data.statusText;
										if(_.params.status>0&&data.status!=_.params.status){
											_.list.splice(index,1);
										}
										
									}
								});
								
							}
						}
					})
				},
				que(e,index){
					let _=this;
					uni.showModal({
						title:'温馨提示',
						content:'确认订单完成?',
						success: (res) => {
							if(res.confirm){
								_.$post(_.$api.orderReceipt,{order_id:e.id,type:2,token:uni.getStorageSync('userToken')},ress=>{
									let {code,data,msg}=ress.data;
									if(code==1){
										_.$project.toast(msg);
										_.list[index].status=data.status;
										_.list[index].statusText=data.statusText;
										if(_.params.status>0&&data.status!=_.params.status){
											_.list.splice(index,1);
										}
										
									}
								});
								
							}
						}
					})
				},
				ques(e,index){
					let _=this;
					uni.showModal({
						title:'温馨提示',
						content:'确认订单完成?',
						success: (res) => {
							if(res.confirm){
								_.$post(_.$api.corderQue,{id:e.id,type:2,token:uni.getStorageSync('userToken')},ress=>{
									let {code,data,msg}=ress.data;
									if(code==1){
										_.$project.toast(msg);
										_.list[index].status=data.status;
										_.list[index].statusText=data.statusText;
										if(_.params.status>0&&data.status!=_.params.status){
											_.list.splice(index,1);
										}
										
									}
								});
								
							}
						}
					})
				},
				quess(e,index){
					let _=this;
					uni.showModal({
						title:'温馨提示',
						content:'确认订单完成?',
						success: (res) => {
							if(res.confirm){
								_.$post(_.$api.porderQue,{id:e.id,type:2,token:uni.getStorageSync('userToken')},ress=>{
									let {code,data,msg}=ress.data;
									if(code==1){
										_.$project.toast(msg);
										_.list[index].status=data.status;
										_.list[index].statusText=data.statusText;
										if(_.params.status>0&&data.status!=_.params.status){
											_.list.splice(index,1);
										}
										
									}
								});
								
							}
						}
					})
				},
				change(e) {
					console.log(e);
					this.current = e;
					this.params.status=this.cate[e].id;
					this.getList();
				},
				changes(e) {
					console.log(e);
					this.currents = e;
					this.params.status=this.cates[e].id;
					this.getLists();
				},
				changess(e) {
					console.log(e);
					this.currentss = e;
					this.params.status=this.catess[e].id;
					this.getListss();
				},
				getList() {
					this.params.page = 1;
					this.$get(this.$api.orderChList, this.params, res => {
						let data = res.data;
				
						if (!data.data.data || data.data.data.length < 1) {
							this.emptyShow = true;
						} else {
							this.emptyShow = false;
						}
				
						this.list = data.data.data;
						this.total = data.data.total;
					});
				},
				getLists() {
					this.params.page = 1;
					this.$get(this.$api.corderChList, this.params, res => {
						let data = res.data;
				
						if (!data.data.data || data.data.data.length < 1) {
							this.emptyShow = true;
						} else {
							this.emptyShow = false;
						}
				
						this.list = data.data.data;
						this.total = data.data.total;
					});
				},
				getListss() {
					this.params.page = 1;
					this.$get(this.$api.porderChList, this.params, res => {
						let data = res.data;
				
						if (!data.data.data || data.data.data.length < 1) {
							this.emptyShow = true;
						} else {
							this.emptyShow = false;
						}
				
						this.list = data.data.data;
						this.total = data.data.total;
					});
				},
			},
		  onReachBottom() {
		  	if (this.list.length < this.total&&this.lanCheck==1) {
		  		this.params.page++;
		  		this.$get(this.$api.orderChList, this.params, res => {
		  			let data = res.data;
		  			data.data.data.forEach(ress => {
		  				this.list.push(ress);
		  			});
		  		});
		  	}
			
			if (this.list.length < this.total&&this.lanCheck==2) {
				this.params.page++;
				this.$get(this.$api.corderChList, this.params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
			
			if (this.list.length < this.total&&this.lanCheck==3) {
				this.params.page++;
				this.$get(this.$api.porderChList, this.params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
			
			
		  },
		}
</script>

<style lang="scss" scoped>
	.lan_box{
		display: flex;
		align-items: center;
	
	}
	.infos{
		flex: 1;
		text-align: center;
		box-sizing: border-box;
		background-color: #EEEEEE;
		padding: 20rpx 0;
	    border-right: 1rpx solid #C0C0C0;
		border-bottom: 1rpx solid #C0C0C0;
	}
	.check{
		background-color: #EF8200;
		color: white;
	}
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 28rpx !important;
	}
   .heads{
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
   }
   
.list_box {
		box-sizing: border-box;
		padding: 0 20rpx 20rpx 20rpx;
	}

	.info {
		margin-top: 30rpx;
		background-color: white;
		border-radius: 20rpx;

	}

	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}
	.red{
		color: red;
	}
	.center{
		box-sizing: border-box;
		padding: 15rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
	}
	.img{
		width: 35%;
		height: 240rpx;
		border-radius: 15rpx;
	}
	.c_right{
		width: 60%;
		text-align: left;
	}
	.name{
		font-weight: bold;
	}
	.time{
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.m_box{
		font-size: 24rpx;
		text-align: right;
		margin-top: 110rpx;
	}
	.money{
		font-size: 32rpx;
		color: red;
		font-weight: bold;
		margin-left: 20rpx;
	}
	.bottom{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}
	.btn{
		box-sizing: border-box;
		padding: 8rpx 25rpx;
		border: 1rpx solid black;
		font-size: 26rpx;
		border-radius: 25rpx;
		margin-left: 20rpx;
	}
	.btn_red{
			border: 1rpx solid red;
			color:red;
	}
	.bitmap {
		margin-top: 10vh;
		text-align: center;
	}
	
	
	.b_top{
		box-sizing: border-box;
		padding:0rpx 20rpx 20rpx 20rpx;
		border-bottom: 1rpx solid #eee;
	}
	.i_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.address_box{
		font-size: 24rpx;
		width: 70%;
	}
</style>